<script setup lang="ts">
import { getCurrentInstance, showLoading } from '@tarojs/taro';
import { onMounted, reactive } from 'vue';
import { INSPECTION_RECORD_LIST_QUERY } from '/@/api/modules/equipment/asset-detail';
import DeviceAccountDetailItem from './device-account-detail-item.vue';
/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  id: string;
};

/**
 * 巡检任务
 */
const inspectionState = reactive<{
  /**
   * 当前页
   */
  activePage: number;
  /**
   * 加载状态
   */
  loading: boolean;
  /**
   * 加载完成状态
   */
  finished: boolean;
  /**
   * 列表
   */
  list: AssetDetail.InspectionRecordDto[];
}>({
  activePage: 1,
  loading: false,
  finished: false,
  list: [],
});

/**
 * 刷新巡检列表
 */
function refreshInspectionList() {
  inspectionState.activePage = 1;
  inspectionState.loading = true;
  inspectionState.finished = false;
  inspectionState.list = [];
  inspectionRecordListQuery();
}
/**
 * 巡检记录列表
 */
function inspectionRecordListQuery(page: number = 1, pageSize: number = 15) {
  if (!page && inspectionState.finished) return;
  inspectionState.loading = true;
  showLoading();
  INSPECTION_RECORD_LIST_QUERY({ comQuery: { page, pageSize }, assetId: params.id })
    .then((res) => {
      inspectionState.loading = false;

      if (
        inspectionState.activePage >=
        (res.comQuery.pageCount ||
          (res.comQuery.totalCount as number) / (res.comQuery.pageSize as number) ||
          1)
      ) {
        inspectionState.finished = true;
      }
      if (!res.content || !res.content.length) return;
      res.content.forEach((item) => inspectionState.list.push(item));
      inspectionState.activePage += 1;
    })
    .catch(() => {
      inspectionState.loading = false;
    });
}

onMounted(() => {
  refreshInspectionList();
});
</script>
<template>
  <view class="device-detail-list__wrapper">
    <device-account-detail-item
      :item="item"
      v-for="item in inspectionState.list"
      :key="item.id"
      from="inspection"
    />

    <view class="app-page__list-tips">
      <text v-if="!inspectionState.list.length">暂无数据！</text>
      <text v-else-if="inspectionState.list.length && inspectionState.loading">加载中...</text>
      <text v-else-if="inspectionState.list.length && inspectionState.finished">加载完成!</text>
    </view>
  </view>
</template>
<style lang="scss">
.device-detail-list {
  &__wrapper {
    margin: 20px 20px 80px;
    border-radius: 16px;
  }
}
</style>
